<template>
    <div>
        <JHB :jhb_info="jhb_info" :wakeupParam="callApp"></JHB>
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <div class="column column1" :class="{'mxh':iscover}">
            <div class="column-cover" :class="{'hidden':!iscover}">
                <div class="column-cover-more" @click="showmore()">
                    <img src="../../assets/libs/atic/images/h5_expanded_icon.png"/>
                </div>
                <div class="column-cover-btn">
                    <div class="column-cover-button" @click="openApparticle">打开「扬帆App」查看全文</div>

                </div>
            </div>


            <header>
                <h1 class="article-content-title">{{contents.title}}</h1>

                <div class="dy_all">
                    <router-link :to="{name: 'Index', params: {channelid: contents.channelid}}"
                                 style="text-decoration: none;">
                        <div class="dy_tx fl"><a href="javascript:void(0)" class="nickname YFout"> <img
                                :src="contents.channellogo"></a></div>
                    </router-link>
                    <div style="position: relative;">
                        <router-link :to="{name: 'Index', params: {channelid: contents.channelid}}"
                                     style="text-decoration: none;">
                            <div>

                                <div class="dy_link" style="vertical-align: middle;">
                                    <div class="original_link">

                                        <a href="javascript:void(0)" class="nickname YFout">
                                            {{contents.channelname}}
                                        </a>
                                    </div>
                                </div>
                                <div class="date db"
                                     style="display: inline-block;vertical-align: middle;font-size: 12px;" id="mydate">
                                    {{contents.displaytime}}
                                </div>
                                <div style="display: inline-block;margin-left: 5px;"><img id="articlePvImg"
                                                                                          style="vertical-align: middle;width:12px;height:12px;"
                                                                                          src="../../assets/libs/atic/view_icon.png"><span
                                        id="articlePv" class="article_pv">{{contents.pv}}</span></div>
                            </div>
                        </router-link>
                        <!--  add by jack on 2017/03/24 -->
                        <div id="subscribe" @click="openAppchannel">订阅</div>
                        <!--  end add -->
                    </div>
                </div>

            </header>
            <article class="article-detail">
                <div class="article-relevance">
                </div>
                <div class="mt10"></div>
                <div class="article-detail-inner article-relevance ov" id="article-inner" v-html="contents.cont"
                     v-lazy-container="{ selector: 'img' }" ref="element">
                </div>
                <div class="mt10"></div>
                <div class="article-relevance">
                    <div class="good" v-if="contents.isgood!=0" @click="openApparticle"><img
                            src="../../assets/libs/atic/images/good_hand.png"/><span>{{contents.isgood}}赞</span></div>
                </div>
            </article>
        </div>
        <div id="wrapper" style="padding-top: 0;" :class="{'hidden':iscover}">
            <channel v-if="JSON.stringify(channelInfo)!=='{}'" :info="channelInfo"></channel>
            <remarknew :topicid="topicid" :reportData="commentReportData" :onTop="onTop" :comtype="'commnet'"
                       @change3="getCounter" :isRealtime="isRealtime" :maxcount="2"></remarknew>
            <btn text="去「扬帆App」参与讨论" cate="btn-light" :wakeup-param="callApp" :counter="remarkNum"></btn>
        </div>
        <div class="yfh5-plugs_xin">
            <div id="relatedinfo">
                <div class="yfh5-plugs-name-goods" v-for="(item,index) in relaterow" :class="{'top_b_0':index==0}">
                    <a :href="item.content.detailShareUrl?item.content.detailShareUrl:item.content.modelurl">
                        <img class="img" src="../../assets/libs/atic/images/dian.png">
                        <div class="yfh5-plugs-name2">

                            {{item.content.title}}

                            <img v-if="item.type=='post'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_post_icon.png">
                            <img v-if="item.type=='vod'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_video_icon.png">
                            <img v-if="item.type=='programme'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_live_live.png">
                            <img v-if="item.type=='album'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_album_icon.png">
                            <img v-if="item.type=='special'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_special_icon.png">
                            <img v-if="item.type=='activity'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_event_icon.png">
                            <img v-if="item.type=='goods'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_buy_icon.png">
                            <img v-if="item.type=='audio'" class="img_tag"
                                 style="width:40px;height:20px; top: 5px; position: relative;"
                                 src="../../assets/libs/atic/images/tag_audio_icon.png">

                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import qs from "querystring"
    import "../../assets/libs/atic/common.css"
    import "../../assets/libs/atic/show.css"
    import "../../assets/libs/atic/style.new.css"

    export default {
        components: {
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve);
            },
            Channel: function (resolve) {
                require(["../../components/channel.vue"], resolve);
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new.vue"], resolve)
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve)
            },
            JHB: function (resolve) {
                require(["../../components/jhb.vue"], resolve);
            },
        },
        data: function () {
            return {
                jhb_info: {
                    contentId: this.$route.params.articleId,
                    contentType: 22
                },
                contents: {
                    cont: "",
                    title: "",
                    channellogo: "",
                    channelname: "",
                    displaytime: "",
                    pv: 0,
                    channelid: "",
                    isgood: 0
                },
                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                callApp: {
                    contentType: 7,
                    contentParam: this.$route.params.articleId,
                    infoParams: {
                        channelid: "",
                        channelname: "",
                        url: "",
                        type: "article"
                    }
                },
                channelInfo: {},
                remarkNum: 0,
                commentReportData: {},
                onTop: true,
                isRealtime: false,
                topicid: "",
                iscover: false,
                relaterow: [],

            }
        },
        mounted: function () {
            let that = this;

            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getAssociatedContentList",
                qs.stringify({
                    params: JSON.stringify({
                        id: "article_" + this.$route.params.articleId,
                        idx: 0,
                        size: 6,
                        t: (new Date()).valueOf()
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {
                that.relaterow = response.data.data.rows;
            })


            this.axios.post(
                interbaseUrl + "setsail/external/externalService?service=getArticleDetail",
                qs.stringify({
                    params: JSON.stringify({
                        articleId: this.$route.params.articleId
                    }),
                    apiVersion: process.env.VUE_APP_SERVER_VER
                })
            ).then((response) => {

                //404
                if (response.data.state == 2056) {
                    window.location.href = "//" + window.location.host + "/yfs/Dnf";
                    return false;
                }
                /* // 404重定向
                 if (response.data.state === 2012)
                     this.$router.push("/yfs/Dnf");*/
                //console.log(JSON.stringify(response.data.data.content, undefined, 2));
                that.contents.cont = that.letslazyload(response.data.data.content);
                that.contents.title = response.data.data.title;
                that.contents.channellogo = response.data.data.hostUserIcon;
                that.contents.channelname = response.data.data.channelName;
                that.contents.isgood = response.data.data.praiseCount;
                that.contents.displaytime = that.toFullCommonTime(response.data.data.displayTime);
                that.contents.pv = response.data.data.pv;
                that.contents.channelid = response.data.data.channelId;
                that.callApp.infoParams.channelid = response.data.data.channelId;
                that.callApp.infoParams.channelname = response.data.data.channelName;
                that.callApp.infoParams.url = response.data.data.modelUrl;
                that.topicid = response.data.data.topicid;
                if (that.contents.channelid != "") {
                    this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                        qs.stringify({
                            "params": JSON.stringify({"channelId": that.contents.channelid}),
                            "apiVersion": process.env.VUE_APP_SERVER_VER
                        })
                    ).then((response) => {
                        that.channelInfo = response.data.data;
                    });
                }
                // console.log("+++++++++++++++++++++++++++");
                // console.log(JSON.stringify(this.channelInfo, undefined, 2));
                // console.log("+++++++++++++++++++++++++++");
                // 修改页面信息
                let meta = {
                    title: !(response.data.state == 2056) ? response.data.data.shareTitle : "文章不存在",
                    content: !(response.data.state == 2056) ? response.data.data.shareContent : "文章不存在",
                    name: !(response.data.state == 2056) ? response.data.data.title : "文章不存在"
                };
                // console.log(meta);
                that.createMetaInfo(meta);
                that.freshTitles(!(response.data.state == 2056) ? response.data.data.shareTitle : "文章不存在");
                // 二次分享
                that.initShareConfig = initShareConf(
                    response.data.data.shareTitle,
                    response.data.data.shareContent,
                    response.data.data.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        opertime: that.toFullTime(),
                        imei: "",
                        openid: "",
                        ip: "",
                        channelid: response.data.data.channelId,
                        contentid: that.$route.params.articleId,
                        name: response.data.data.title,
                        contenttype: "information",
                        type: "article_1",
                        tagid: "",
                        extendtag: "",
                        sharetype: "weixin",
                        shareurl: window.location.href
                    }
                );


                function dolooknews() {
                    let actionType = "looknews";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip": "",
                        "contentid": that.$route.params.articleId,
                        "imei": "",
                        "extendtag": "",
                        "type": "article_1",
                        "contenttype": "information",
                        "opertime": that.toFullTime(),
                        "contentname": response.data.data.title,
                        "channelid": response.data.data.channelId,
                        "sharetype": "",
                        "newsurl": response.data.data.shareUrl,
                    };
                    shareUrlReport(behaviorData, actionType);
                }
                    setTimeout(function(){
                         dolooknews();
                  },5000)


                // 评论comment行为
                that.commentReportData = {
                    uid: "",
                    username: "",
                    tagid: response.data.data.tagId,
                    contentid: that.$route.params.articleId,
                    imei: "",
                    openid: "",
                    ip: "",
                    name: response.data.data.title,
                    extendtag: "",
                    type: "article_1",
                    contenttype: "information",
                    opertime: that.toFullTime(),
                    channelid: response.data.data.channelId
                };

            }).then(() => {
                let height = that.$refs.element.offsetHeight;
                if (height < 1000) {
                    that.iscover = false;
                } else {
                    that.iscover = true;
                }
            });
        },
        methods: {
            letslazyload: function (contentp) {
                let regexp1 = new RegExp(/(\<img )([^>]*)(src=")([^"]*")([^>]*)(\>)/, 'g');

                contentp = contentp.replace(regexp1, function (match, p1, p2, p3, p4, p5, p6) {
                    return p1 + p2 + 'data-src="' + p4 + p5 + p6;
                });
                let reg = new RegExp("http://admin", "g")
                contentp = contentp.replace(reg, "//admin");
                return contentp;
            },
            openapp: function () {
                openDownPage(this.callApp.contentType, this.callApp.contentParam, this.callApp.infoParams);
            },
            getState: function (bol) {
                this.layerDisplay = bol;
            },
            openAppchannel: function () {
                /*  let r=confirm("将打开【扬帆】app，确认打开吗?");
                  if(r==false){
                      return false;
                  }else if(r==true){
                      openDownPage(6, this.callApp.infoParams.channelid);
                  }
               */
                let that = this;
                that.$dialog.confirm('将打开【扬帆】app，确认打开吗?', {
                    okText: '确定',  // 本地化确认按钮文字提示内容
                    cancelText: '取消',  //本地化关闭按钮文字提示内容
                })
                    .then(function () {
                        // 点击确定执行
                        openDownPage(6, this.callApp.infoParams.channelid);
                    })
                    .catch(function () {
                        // 点击取消执行
                    });

            },
            openApparticle: function () {
                openDownPage(7, this.callApp.contentParam, this.callApp.infoParams);
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },
            showmore: function () {
                this.iscover = false;
            }
        }
    }
</script>

<style>
    .article-relevance img {
        min-height: 10px;
        display: block;
        margin: 0 auto;
        width: 100%;
    }

    .article_pv {
        font-size: 12px;
        color: #999999;
        margin-left: 6px;
        vertical-align: middle;
    }

    /*add by jack on 2017/03/24*/

    #subscribe {
        /*display:none;*/
        right: 0px;
        top: -4px;
        width: 35px;
        text-align: center;
        position: absolute;
        color: #7056f3;
        border-radius: 27.5px;
        padding: 10px;
        background: #F0EBFD;
        height: 6px;
        line-height: 6px;
    }

    #is_subscribe {
        display: none;
        right: 0px;
        width: 35px;
        text-align: center;
        top: -4px;
        position: absolute;
        color: #B3AFA9;
        border-radius: 27.5px;
        padding: 10px;
        border: 1px solid #EDECEA;
        background: #ffffff;
        height: 6px;
        line-height: 6px;
    }

    .article-relevance .good {
        height: 16px;
    }

    .article-relevance .good span {
        line-height: 20px;
        display: block;
        float: left;
        top: 0;
        height: 16px;
        margin-left: 5px;
        font-size: 0.9rem;
        color: #666;
    }

    .article-relevance .good img {
        height: 16px;
        display: block;
        float: left;
        width: 16px;
    }

    .mxh {
        height: 600px;
        overflow: hidden;
    }

    .top_b_0 {
        border-top: 0px solid #ededed !important;
    }

    .column {
        position: relative;
    }

    .column-cover {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: none;
        left: 0;
    }

    .column-cover-more {
        width: 100%;
        height: 70px;
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        text-align: center;
    }

    .column-cover-more img {
        height: 25px;
        position: relative;
        top: 40px;
    }

    .column-cover-btn {
        width: 100%;
        height: 50px;
        background: #fff;
        padding: 15px 0;
    }

    .column-cover-button {
        margin: 0 15px;
        background: #9852FF;
        color: #fff;
        font-size: 1rem;
        height: 2.6rem;
        line-height: 2.6rem;
        border-radius: 1000px;
        text-align: center;
    }

    .yfh5-plugs_xin a {
        text-decoration: none;
        color: #444;
    }

    p, ul, li, form, h1, h2, h3, h4, h5, h6, dl, dt, dd, img, div, table, td, th, input, textarea {
        margin: 0;
        padding: 0;
        border: 0;
    }

</style>